<template>
	<view class="">
		<view class="data-panel">
			<view class="flex justify-between align-center">
				<view class="flex justify-between align-center">
					<view class="flex">
						<view 
							class="tabs-item" 
							:class="dateIndex===ix?'bg-red':''"
							v-for="(im, ix) in dateTabs" 
							:key="im.value"
							@click="onDate(im,ix)"
						>
						<text>{{im.name}}</text>
						</view>
					</view>
				</view>
				<uni-icons 
					custom-prefix="iconfont" 
					type="icon-excel" 
					size="32" 
					@click="onExcel('GetStaffAnalyse', {date: searchData.date})" 
					color="#13227a">
				</uni-icons>
			</view>
			<view class="flex fsize-26 mt-30">
				<view class="pt-40 pb-40 shrink0 pr-10 width-220">
					<view>总提成</view>
					<view class="line-red">
						<text class="">￥</text>
						<text class="fsize-40">{{planData.totalBonusAmount}}</text>
					</view>
				</view>
				<view class="w-100 border-l pl-60">
					<view class="flex">
						<view class="w-50">
							<view>服务业绩</view>
							<view>{{planData.totalServiceAmount}}</view>
						</view>
						<view class="w-50">
							<view>员工人数</view>
							<view>{{planData.totalStaffNums}}</view>
						</view>
					</view>
					<view class="flex mt-30">
						<view class="w-50">
							<view>销售业绩</view>
							<view>{{planData.totalSalesAmount}}</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="pl-20 pr-20 bg-white mb-20">
			<u-tabs
				:list="subsectionList" 
				:current="curNow" 
				keyName="label"
				lineWidth="40"
				lineColor="#e54d42"
				:activeStyle="{color: '#e54d42'}"
				@click="sectionChange" 
			/>
		</view>
		<view class="my-list pl-0 pr-0" :style="{height:swiperHeight+'px'}">
			<zb-table
				:columns="tableColumn"
				:data="tableData"
				:border="false"
				@sort-change="onSort"
			/>
		</view>
		<u-calendar
			:show="showCalendar" 
			mode="range" 
			@confirm="confirmDate" 
			@close="showCalendar=false" 
			:minDate="dateDispose.minDate"
			:maxDate="dateDispose.maxDate"
			monthNum ="14"
			color="#e54d42"
			title="选择查询日期范围"
		/>
	</view>
</template>

<script>
	import myCellGroup from '@/components/my-cell-group/index.vue'
	import setDate from '@/common/date.js';
	import listHeightMixin from '@/common/computedAltitude.js'
	import dwFile from '@/common/mixins/downloadFile.js'
	export default {
		mixins:[listHeightMixin, dwFile],
		components:{ myCellGroup },
		data(){
			return {
				curNow: 0,
				dateIndex: 0,
				showCalendar: false,
				sdate: '',
				subsectionList: [
					{ label: '总业绩', value: 0 },
					{ label: '服务业绩', value: 1 },
					{ label: '销售业绩', value: 2 },
					{ label: '服务人次', value: 3 },
				],
				dateDispose:{
					minDate:setDate.getDate(-365),
					maxDate:setDate.getDate(0)
				},
				dateTabs:[
					{name:'今天',value: `${setDate.getDate(0)} 到 ${setDate.getDate(0)}`},
					{name:'昨日',value: `${setDate.getDate(-1)} 到 ${setDate.getDate(-1)}`},
					{name:'近七日',value:`${setDate.getDate(-7)} 到 ${setDate.getDate(0)}`},
					{name:'本月',value:`${setDate.getCurrentMonth().startDate} 到 ${setDate.getCurrentMonth().endDate}`},
					{name:'自定义',value:999}
				],
				tableColumn:[
					{ type: 'index', label: '排名', align: 'center', width:60},
					{ name: 'name', label: '姓名', align: 'center', width:104},
					{ name: 'bonusAmount', label: '提成', align: 'center', sorter: 'custom', width:104},
					{ name: 'totalAmount', label: '总业绩', align: 'center', sorter: 'custom', width:104},
				],
				tableData:[],
				planData:{
					totalBonusAmount: 0,
					totalSalesAmount: 0,
					totalServiceAmount: 0,
					totalStaffNums: 0,
				},
				searchData:{
					page:1,
					limit: 999,
					type: 0,
					orderField: '',
					orderDirection: '',
					date:'',
				}
			}
		},
		onLoad() {
			this.searchData.date = `${setDate.getDate(0)} 到 ${setDate.getDate(0)}`
			this.searchData.page = 1
			this.getPageList()
		},
		methods: {
			onSort(column,model,index){
				this.tableData = []
				this.searchData.page = 1
				this.searchData.orderField = column.name
				this.searchData.orderDirection = model
				this.getPageList()
			},
			getPageList(){
				this.$reqPost('GetStaffAnalyse', this.searchData).then(res=>{
					this.tableData = res.data.items
					this.planData = {
						totalBonusAmount: res.data.totalBonusAmount,
						totalSalesAmount: res.data.totalSalesAmount,
						totalServiceAmount: res.data.totalServiceAmount,
						totalStaffNums: res.data.totalStaffNums,
					}
				})
			},
			sectionChange(e) {
				if (this.curNow === e.index) return
				this.curNow = e.index
				switch (e.index){
					case 0:
						this.tableColumn = [
							{ type: 'index', label: '排名', align: 'center', width:60},
							{ name: 'name', label: '姓名', align:"center", width:104},
							{ name: 'bonusAmount', label: '提成', align:"center", sorter: 'custom', width:104},
							{ name: 'totalAmount', label: '总业绩', align:"center", sorter: 'custom', width:104},
						]
						break;
					case 1:
						this.tableColumn = [
							{ type: 'index', label: '排名', align: 'center', width:60},
							{ name: 'name', label: '姓名', align:"center", width:104},
							{ name: 'bonusAmount', label: '提成', align:"center", sorter: 'custom', width:104},
							{ name: 'totalAmount', label: '服务业绩', align:"center", sorter: 'custom', width:104},
						]
						break;
					case 2:
						this.tableColumn = [
							{ type: 'index', label: '排名', align: 'center', width:60},
							{ name: 'name', label: '姓名', align:"center", width:104},
							{ name: 'bonusAmount', label: '提成', align:"center", sorter: 'custom', width:104},
							{ name: 'totalAmount', label: '销售业绩', align:"center", sorter: 'custom', width:104},
						]
						break;
					case 3:
						this.tableColumn = [
							{ type: 'index', label: '排名', align: 'center', width:60},
							{ name: 'name', label: '姓名', align:"center", width:78},
							{ name: 'manNums', label: '男客数', align:"center", sorter: 'custom', width:78},
							{ name: 'girlNums', label: '女客数', align:"center", sorter: 'custom', width:78},
							{ name: 'totalNums', label: '总数', align:"center", sorter: 'custom', width:80},
						]
						break;
				}
				this.searchData.type = e.value
				this.getPageList()
			},
			confirmDate(dates){
				this.sdate = `${dates[0].slice(5)} 到 ${dates[dates.length-1].slice(5)}`
				this.dateTabs[4].name = this.sdate
				this.searchData.date = `${dates[0]} 到 ${dates[dates.length-1]}`
				this.getPageList()
				this.showCalendar = false
			},
			onDate(row,index){
				if(this.dateIndex === index && this.dateIndex!==4) return
				this.dateIndex = index
				if(index === 4){
					this.showCalendar = true
				}else {
					this.dateTabs[4].name = '自定义'
					this.searchData.date = row.value
					this.getPageList()
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.data-panel{
		padding:10px;
		font-size: 14px;
		background-color: #fff;
		.tabs-item{
			padding:4px 6px;
			border-radius:2px;
		}
	}
</style>